<template>
    <div class="newRoutineBloodTest">
        <el-page-header @back="goBack" content="血常规"></el-page-header>
        <el-container>
            <el-header id="header">血常规检查</el-header>
            <el-container>
                <!-- aside -->
                <el-aside width="350px" id="aside">
                    <div style="margin: 20px;"></div>
                    <!-- 检查确认 -->
                    <el-form  label-width="80px" :model="detailsOfTheProject" id="form">
                        <el-form-item label="检查单号">
                            <el-input v-model="detailsOfTheProject.checkDetailId"></el-input>
                        </el-form-item>
                        <el-form-item label="病人姓名">
                            <el-input v-model="detailsOfTheProject.patientName"></el-input>
                        </el-form-item>
                        <el-form-item label="检查项目">
                            <el-input v-model="detailsOfTheProject.itemName"></el-input>
                        </el-form-item>
                        <el-form-item label="科室">
                            <el-input v-model="detailsOfTheProject.depName"></el-input>
                        </el-form-item>
                        <el-form-item label="检查医生">
                            <el-input v-model="detailsOfTheProject.doctorName"></el-input>
                        </el-form-item>
                        <el-form-item label="时间">
                            <el-date-picker v-model="detailsOfTheProject.testingTime" type="datetime" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" round @click="open">开始检查</el-button>
                        </el-form-item>       
                    </el-form>
                </el-aside>
                <el-container>
                    <!-- main -->
                    <el-main id="main">           
                        <!-- 对应检查项目明细展示 -->
                        <el-table border :data="bloodCheck" style="width: 100%"  
                            :header-cell-style="{textAlign: 'center',background:'#67C23A',color:'#303133'}"
                            :cell-style="{ textAlign: 'center'}">
                            <el-table-column  label="检查医嘱">
                                <el-table-column prop="redCellVolumn" label="红细胞压积"></el-table-column>
                                <el-table-column prop="redCellAvgVolumn" label="红细胞平均体积"></el-table-column>
                                <el-table-column prop="redCellWidth" label="红细胞体积分布宽度"></el-table-column>
                                <el-table-column prop="lympCellNum" label="淋巴细胞计数"></el-table-column>
                                <el-table-column prop="midCellNum" label="中间细胞计数"></el-table-column>
                                <el-table-column prop="bloodPlateletVolumn" label="血小板平均体积"></el-table-column>
                                <el-table-column prop="bloodPlateletWidth" label="血小板体积分布宽度"></el-table-column>
                                <el-table-column prop="hemoglobinNum" label="红细胞平均血红蛋白含量"></el-table-column>
                                <el-table-column prop="hemoglobinConcentration" label="红细胞平均血红蛋白浓度"></el-table-column>
                            </el-table-column>
                        </el-table>   
                        
                        <div style="margin: 20px;" >
                            <el-row :gutter="10" >
                                <!-- 检查总结 -->
                                <el-form ref="form" :model="inspectionResult" label-width="100px">
                                    <el-col :span="24" :pull="1">
                                        <el-form-item label="病历摘要" prop="desc">
                                            <el-input type="textarea" v-model="inspectionResult.records" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24" :pull="1">
                                        <el-form-item label="临床诊断" prop="desc">
                                            <el-input type="textarea" v-model="inspectionResult.clinicalDiagnosis "></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24" :push="10">
                                        <!-- 生成检查结果表单 -->
                                        <el-button type="success" round @click="generateTheForm">检查完成</el-button>
                                    </el-col>
                                </el-form>
                            </el-row>
                        </div>
                    </el-main>
                    <!-- footer -->
                    <el-footer id="footer" height="120px">
                        <div style="margin: 10px;"></div>
                        <el-row :gutter="20">
                            <!-- 申请作废 -->
                            <el-form  label-width="80px" :model="cancelApplyFor" id="formNew">
                                <el-col :span="8" :push="1"><br>
                                    <el-checkbox v-model="checked">作废申请</el-checkbox>
                                </el-col>
                                <el-col :span="8" :pull="2" >
                                    <el-form-item label="作废时间"  id="indexInput">
                                        <el-date-picker v-model="cancelApplyFor.checkDatatime" type="datetime" placeholder="选择日期"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="作废人">
                                        <el-input v-model="cancelApplyFor.cancelPerson"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :push="1">
                                    <!-- <el-form-item label="申请作废">
                                        <el-input v-model="cancelApplyFor.cancelName"></el-input>
                                    </el-form-item> -->
                                    <el-checkbox v-model="checked" :disabled=true>已缴费</el-checkbox>
                                </el-col>
                                <el-col :span="8" :pull="2">
                                    <el-form-item label="确认时间"  id="indexInput">
                                        <el-date-picker v-model="cancelApplyFor.affirmDataTime" type="datetime" placeholder="选择日期"></el-date-picker>
                                    </el-form-item>
                                </el-col>  
                                <el-col :span="8" :push="2">
                                    <el-button type="info" round @click="checkInvalid" >检查作废</el-button>
                                </el-col>     
                            </el-form>
                        </el-row>    
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>


<script>
    export default {
        data(){
            return{
                // 检查确认对应数据
                detailsOfTheProject: {
                
                },
                // 检查项目明细数据
                bloodCheck: [{
                    // 病历表ID
                    caseId:0,
                    //检查详情表ID
                    checkDetailId:0,
                    //查询详情
                    redCellVolumn:"2.5-3.6",
                    redCellAvgVolumn:"2.5-3.6",
                    redCellWidth:"2.5-3.6",
                    lympCellNum:"2.5-3.6",
                    midCellNum:"2.5-3.6",
                    bloodPlateletVolumn:"2.5-3.6",
                    bloodPlateletWidth:"2.5-3.6",
                    hemoglobinNum:"2.5-3.6",
                    hemoglobinConcentration:"2.5-3.6",
                    //检查时间
                    testingTime:"",
                    // 病历摘要
                    records:"",
                    //临床诊断
                    clinicalDiagnosis:""
                }],
                //用于接收给后台的数据
                sendData:{},
                // 检查结果操作
                inspectionResult:{
                    // 病历摘要
                    records:"",
                    //临床诊断
                    clinicalDiagnosis:""
                },
                // 作废申请数据
                cancelApplyFor: {

                },
                // 检查项目作废默认为不作废
                checked:false,

                
                
            }        
        },
        methods:{
            //检查完成生成检查结果表存入数据库
            generateTheForm(){
                //用于接收给后台的数据
                this.sendData=this.bloodCheck[0];
                //检查时间
                this.sendData.testingTime=this.detailsOfTheProject.testingTime;
                // 病历表ID
                this.sendData.caseId=this.detailsOfTheProject.caseId;
                //检查详情表ID
                this.sendData.checkDetailId=this.detailsOfTheProject.checkDetailId;

                this.sendData.records=this.inspectionResult.records;
                this.sendData.clinicalDiagnosis=this.inspectionResult.clinicalDiagnosis;
                console.log("是否添加成功：");
                console.log(this.sendData);
                this.$http.put('http://localhost:8088/formSubmission',this.sendData
                ).then(res=>{
                    console.log("检查生成检查结果详情表返回结果：")
                    console.log(res.data)
                    if(res.data.success){
                        this.$message({
                            type: 'success',
                            message: '' + res.data.message
                            
                        })
                        
                    } else {
                        this.$message({
                            type: 'error',
                            message: '错误' + res.data.message
                        })
                    }
                }).catch(err=>{
                    console.error(err)
                })
            },
            // 作废操作
            checkInvalid(){

            },
            //返回
            goBack() {
                this.$router.push('/bloodExamination')
            },
            // 组件 检查完成效果
            open() {
                this.$alert('正在正生成结果', '进度', {  
                    confirmButtonText: 'OK', 
                    callback: action => {
                        this.$message({
                            type: 'success',
                            message: `检查完毕`
                        });
                    }
                });
            },
        },
        mounted() {
            console.log("页面加载")
            console.log(this.$route.params)
            if(this.$route.params){
            // 获取排队页面传入参数
            this.detailsOfTheProject=this.$route.params.newRow

            }else{
                console.log("没有数据")
            }  
        }
    }
</script>

<style>
    #header{
        background-color: #eef3f1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        color: #333;
        text-align: center;
        line-height: 60px;

    }
    #aside {
        background-color: #eef3f1; 
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        color: #333;
        text-align: center;
        /* line-height: 400px; */
    }

    #main {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /* border-radius: 6px; */
        background-color: #eef3f1;
        color: #333;
    } 

    #footer{
        background-color: #eef3f1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        color: #333;
        /* text-align: center; */
        /* line-height: 200px; */

    }

</style>

<style>
    /* 调整input的输入框的高度 */
    #formNew .el-input__inner{
        width: 120px;
        height: 20px;
    }
    #form .el-input__inner{
        width: 220px;
        
    }
    /* 作废操作时间input框宽度 */
    #indexInput .el-input__inner{
        width: 200px;
    }
</style>